<template>
  <div class="main">
    <swiper ref="mySwiperA" class="mySwiperA" :options="swiperOptionsA">
      <swiper-slide class="swiper-no-swiping" v-for="(item, index) in swiperListA" :key="index">
        <img :src="item.imgUrl" alt="" srcset="" />
      </swiper-slide>
      <div
        class="swiper-button-prev"
        slot="button-prev"
      ></div>
      <div
        class="swiper-button-next"
        slot="button-next"
      ></div>
    </swiper>

    <!-- <div class="nav-list">
      <div
        class="item"
        v-for="(item, index) in swiperListB"
        :key="index"
        @click="swiperClick(index)"
        :class="current == index ? 'active' : ''"
      >
        <el-image lazy :src="item.imgUrl" alt="" srcset="" />
      </div>
    </div> -->
    <div class="mySwiperB">
      <swiper ref="mySwiperB" :options="swiperOptionsB">
        <swiper-slide v-for="(item, index) in swiperListB" :key="index">
          <img :src="item.imgUrl" alt="" srcset="" />
        </swiper-slide>
      </swiper>
      <div
        class="swiper-button-prev"
        slot="button-prev"
      ></div>
      <div
        class="swiper-button-next"
        slot="button-next"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "carrousel",
  data() {
    const that = this;
    return {
      currentA: 0,
      currentB: 0,
      swiperListA: [
        { imgUrl: "http://placehold.it/460x635&text=460x635-1" },
        { imgUrl: "http://placehold.it/460x635&text=460x635-2" },
        { imgUrl: "http://placehold.it/460x635&text=460x635-3" },
        { imgUrl: "http://placehold.it/460x635&text=460x635-4" },
        { imgUrl: "http://placehold.it/460x635&text=460x635-5" },
        { imgUrl: "http://placehold.it/460x635&text=460x635-6" },
        { imgUrl: "http://placehold.it/460x635&text=460x635-7" },
        { imgUrl: "http://placehold.it/460x635&text=460x635-8" },
        { imgUrl: "http://placehold.it/460x635&text=460x635-9" },
      ],
      // 轮播
      swiperListB: [
        { imgUrl: "http://placehold.it/240x150&text=240x150-1" },
        { imgUrl: "http://placehold.it/240x150&text=240x150-2" },
        { imgUrl: "http://placehold.it/240x150&text=240x150-3" },
        { imgUrl: "http://placehold.it/240x150&text=240x150-4" },
        { imgUrl: "http://placehold.it/240x150&text=240x150-5" },
        { imgUrl: "http://placehold.it/240x150&text=240x150-6" },
        { imgUrl: "http://placehold.it/240x150&text=240x150-7" },
        { imgUrl: "http://placehold.it/240x150&text=240x150-8" },
        { imgUrl: "http://placehold.it/240x150&text=240x150-9" },
      ],
      swiperOptionsA: {
        // loop: true,
        noSwiping : true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          slideChange: function () {
            // console.log("A", this.realIndex);
            that.currentA = this.realIndex;
          },
        },
      },
      swiperOptionsB: {
        // loop: true,
        slidesPerView: 5,
        spaceBetween: 20,
        slideToClickedSlide: true,
        centeredSlides : true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          slideChange: function () {
            // console.log("B", this.realIndex);
            that.currentB = this.realIndex;
          },
        },
      },
    };
  },
  computed: {
    swiperA() {
      return this.$refs.mySwiperA.$swiper;
    },
    swiperB() {
      return this.$refs.mySwiperB.$swiper;
    },
  },
  watch: {
    currentA(val, oldVal) {
      // console.log("a: " + val, oldVal);
      // this.swiperB.slideTo(val+1, 500, false);
    },
    currentB(val, oldVal) {
      // console.log("b: " + val, oldVal);
      this.swiperA.slideTo(val+1, 500, false);
    },
  },
  mounted() {
    // console.log("swiperA", this.swiperA);
    // console.log("swiperB", this.swiperB);
  },
  methods: {
    swiperClick(index) {
      this.swiperA.slideTo(index + 1, 500, false);
      this.current = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-list {
  display: flex;
  width: 1280px;
  margin: 80px auto;
  .item {
    margin-right: 20px;
    width: 240px;
    height: 150px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .item.active {
    border: 1px solid red;
  }
}
.mySwiperA {
  width: 1125px;
  margin-top: 100px;
  .swiper-slide {
    text-align: center;
    img {
      width: 460px;
      height: 635px;
    }
  }
}
.mySwiperB {
  width: 1280px;
  margin: 80px auto;
  position: relative;
  .swiper-slide {
    width: 240px;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .swiper-slide.swiper-slide-active{
    border: 1px solid red;
  }
  .swiper-button-prev {
    top: 0;
    margin-top: 0;
    left: -50px;
    height: 152px;
    width: 32px;
    background: #333333;
  }
  .swiper-button-next {
    top: 0;
    margin-top: 0;
    right: -50px;
    height: 152px;
    width: 32px;
    background: #333333;
  }
  .swiper-button-prev:after,
  .swiper-button-next:after {
    color: #ccc;
    font-size: 30px;
  }
}
.swiper-container {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #cccccc; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
}
</style>
